<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉菜单</title>
        <script src="jquery-3.1.1.js"></script>
        <style>
        div{
            width: 600px;
            margin: 0 auto;
        }
            ul,li{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #ul1{
                background-color: #AAAAAA;
                color: #fff;
                display: flex;
                justify-content: space-around;
                font-size: 18px;
                height: 35px;
                width: 600px;
                margin: 0 auto;
                line-height: 35px;
                position: relative;            
            }
            section ul{
                padding-top: 35px;
                display: none;
                position: absolute;
                top: 8px;
                border: 1px solid #aaa;
            }
            section li{
                margin: 10px;
                margin-top:20px; 
                font-size: 14px;
                text-align: center;
                width: 82px;
            }
            #ul1>li{
                height: 35px;
                width: 100px;
                text-align: center;
            }

            #ul1 a:link{color: #fff;text-decoration:none}
            #ul1 a:visited{color: #fff;text-decoration: none}
            #ul1 a:hover{color: #FF9900;text-decoration: underline }
            #ul1 a:active{color: #FF9900;text-decoration: underline}

            a:link{color: #aaa;text-decoration:none}
            a:visited{color: #aaa;text-decoration: none}
            a:hover{color: #aaa;text-decoration: underline }
            a:active{color: #aaa;text-decoration: underline}
        </style>
    </head>
    <body>
        <div>
            <ul id="ul1">
                <li><a href="#">公司简介</a></li>
                <li><a href="#">产品介绍</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">人才招聘</a></li>
            </ul>
            <section>
                <ul class="ul">
                    <li><a href="">概况介绍</a></li>
                    <li><a href="">发展历史</a></li>
                    <li><a href="">公司实力</a></li>
                </ul>
                <ul>
                    <li><a href="">软件研发</a></li>
                    <li><a href="">软件教育</a></li>
                    <li><a href="">天使投资</a></li>
                </ul>
                <ul>
                    <li><a href="">公司地址</a></li>
                    <li><a href="">联系方式</a></li>
                    <li><a href="">投资加盟</a></li>
                </ul>
                <ul>
                    <li><a href="">IOS招聘</a></li>
                    <li><a href="">HTML5招聘</a></li>
                    <li><a href="">PHP招聘</a></li>
                </ul>
            </section>
        </div>
    </body>
</html>
<script>
    var j = $('#ul1')[0].offsetLeft
    $('#ul1 li').hover(function(){
        var i = $('#ul1 li').index(this)     
        $($('ul')[i+1])
        .show()
        .css('left',j+23+150*i)
    })
    $('section ul').mouseleave(function(){
        $(this).hide()
    })    
</script>